<template>
  <view>
    <input type="text" v-model="detail.nickname" class="input" placeholder="请输入昵称">
    <input type="text" v-model="detail.tel" class="input" placeholder="请输入电话">
    <input type="text" v-model="detail.address" class="input" placeholder="请输入地址">

    <button type="primary" @click="handleEdit" v-if="isEdit">修改</button>
    <button type="warn" @click="handleDelete" v-if="isEdit">删除</button>
    <button type="primary" @click="handleAdd" v-if="!isEdit">添加</button>
  </view>
</template>

<script>
  export default {
    onLoad(options) {
      const {
        id,
        type
      } = options;
      if (type === 'edit') {
        this.id = id
        this.getDetail()
        this.isEdit = true
        uni.setNavigationBarTitle({
          title: '数据修改'
        })
      } else if (type === 'add') {
        this.isEdit = false
        uni.setNavigationBarTitle({
          title: '数据添加'
        })
      }

    },
    data() {
      return {
        id: 0,
        detail: {},
        isEdit: true
      };
    },
    methods: {
      async handleAdd() {
        const [error, resp] = await uni.request({
          url: 'http://localhost:3000/addressList',
          method: 'POST',
          data: {
            ...this.detail,
            id: Math.random().toString().slice(2)
          }
        })
        if (error) {
          return;
        }
        uni.switchTab({
          url: '/pages/home/home'
        })
      },
      async handleEdit() {
        uni.showModal({
          title: '警告',
          content: '确认要修改该项数据吗？',
          success: async (res) => {
            if (res.confirm) {
              const [error, resp] = await uni.request({
                url: 'http://localhost:3000/addressList/' + this.detail.id,
                method: "PUT",
                data: {
                  ...this.detail
                }
              });
              if (!error) {
                uni.showToast({
                  title: '更新成功'
                })
              }
              uni.switchTab({
                url: '/pages/home/home'
              })
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        })
      },
      async handleDelete() {
        uni.showModal({
          title: '警告',
          content: '确认要删除该项数据吗？',
          success: async (res) => {
            if (res.confirm) {
              const [error, resp] = await uni.request({
                url: 'http://localhost:3000/addressList/' + this.detail.id,
                method: 'DELETE'
              });
              if (!error) {
                uni.showToast({
                  title: '删除成功'
                })
              }
              uni.switchTab({
                url: '/pages/home/home'
              })
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        })
      },
      async getDetail() {
        const [error, resp] = await uni.request({
          url: 'http://localhost:3000/addressList/' + this.id
        });
        if (error) {
          console.log('请求地址详情报错')
          return;
        }
        this.detail = resp.data;
        console.log(this.detail)
      }
    }
  }
</script>

<style lang="scss">
  .input {
    border: 1px solid #cccc;
    margin: 6px 0;
    height: 36px;
  }
</style>
